<template>
  <div class="block">
    <div class="marginDiv"></div>
    <el-carousel height="200px" indicator-position="none">
      <el-carousel-item v-for="item in illustrationData" :key="item.id">
        <div class="imgs-container">
          <el-image
            :src="item.url"
            :preview-src-list="urlList"
            class="bannerimg "
            fit="contain"
            style="height: 200px"
          ></el-image>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { entityIllustration } from '@/api/recommend'
export default {
  props: ['illustrationKeywords'],
  data() {
    return {
      illustrationData: []
      // illustrationKeywords: ''

    }
  },
  computed: {
    urlList() {
      return this.illustrationData.map(img => img.url)
    }
  },
  watch: {
    // 监听 当illustrationKeywords值发生改变时，重新调用
    illustrationKeywords: {
      handler() {
        this.getillustrationData(this.illustrationKeywords)
      },
      immediate: true
    }

  },
  methods: {
    // 获取插图图片
    getillustrationData(keywords) {
      entityIllustration(keywords).then((response) => {
        const { code, data } = response.data
        // console.log(response.data)
        if (code === 200) {
          this.illustrationData = data
        }
      })
    }
  }
}
</script>

<style>

  .el-carousel{
    margin-top: 20px;
    margin-left: 20px;
    margin-bottom: 20px;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }

  /* 防止打包之后图片居中失效 */
  .el-image{
    display: block !important;
  }

  .imgs-container{
    background-color: #fff;
  }
  .bannerimg {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

</style>

